<template xmlns:el-table="http://www.w3.org/1999/html">
  <el-container class="container" style="height: 100%">
    <el-header class="header">
      <div style="height: 50px;line-height: 50px;border-bottom: 1px solid #CCC; display: flex">
        <div style="width: 200px;padding-left: 30px;font-weight: bold;color: deepskyblue">管理员界面</div>
        <div style="flex: 1"></div>
        <div style="width: 100px"></div>
        {{ user }}
<!--        <el-button type="primary" @click="changePwd" icon="el-icon-s-tools" >修改密码</el-button>-->
      </div>
    </el-header>
    <el-container style="min-height: 100vh">
      <el-aside class="aside" style="min-height: 100vh">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          style="min-height: 100vh"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>管理员功能</span>
            </template>
            <el-menu-item-group>
              <template slot="title">用户管理</template>
              <el-menu-item index="1-1" @click="CheckOrChange()">查看/编辑用户信息</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main class="main">
        <div style="margin-bottom: 50px">
          <el-button type="primary" @click="adduser()" icon="el-icon-user">添加用户</el-button>
        </div>
        <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item>
              <el-input style="margin: 10px" v-model="form.userid" autocomplete="off"
                        placeholder="请填写userid）"></el-input>
              <el-input style="margin: 10px" v-model="form.password" autocomplete="off" type="password"
                        placeholder="请填写password"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="AddUser">确 定</el-button>
          </div>
        </el-dialog>
        <el-dialog title="删除用户" :visible.sync="deleteVisible">
          是否要删除用户{{ userid }}
          <div slot="footer" class="dialog-footer">
            <el-button @click="deleteVisible = false">取 消</el-button>
            <el-button type="primary" @click="Deleteuser">确 定</el-button>
          </div>
        </el-dialog>
        用户信息
        <el-table :data="allusers" stripe style="width: 100%">
          <el-table-column sortable prop="userid" label="userid"/>
          <el-table-column sortable prop="password" label="password">******</el-table-column>
          <el-table-column
            fixed="right"
            label="Operations">
            <template slot-scope="scope">
              <el-button type="text" @click="changePwd(scope)">修改密码</el-button>
              <el-button type="text" @click="deleteuser(scope)">删除用户</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  import crypto from 'crypto'  //引入依赖
  export default {
    mounted() {
      this.$http.post("query_users",
      ).then((response) => {
        // console.log(response);
        this.allusers = response.data
      })
    },
    data() {
      return {
        dialogTableVisible: false,
        dialogFormVisible: false,
        deleteVisible: false,
        user: sessionStorage.getItem('userid'),
        userid: '',
        allusers: [],
        passwords:'******',
        form: {
          userid: '',
          password: '',
          role: '',
        },
      }
    },
    name: "Home",
    methods: {
      changePwd(a) {
        var me = this;
        me.$router.push({
          path: '/changePassword',
          query: {id: a.row.userid, pwd: a.row.password, role: 1}
        })
      },
      CheckOrChange() {
        window.location.reload()
      },
      deleteuser(a) {
        this.deleteVisible = true
        this.userid = a.row.userid
        // console.log(this.userid)
      },
      Deleteuser(a) {
        this.$http.post('delete_user', null, {
          params: {
            id: this.userid,
          }
        }).then(resp => {
          console.log(resp.data)
          if (resp.data) {
            this.$alert('删除成功！', '删除成功！', {
              confirmButtonText: '确定',
            }).then(resp1 => this.$router.go(0))
          } else {
            this.$alert('删除失败！', '删除失败！', {
              confirmButtonText: '确定',
            }).then(resp1 => this.$router.go(0))
          }
        })
      },
      showClass() {
        var me = this;
        // print()
        me.$router.push({
          path: '/admin-class'
        })
      },
      //查看/编辑
      adduser() {
        this.dialogFormVisible = true
      },
      AddUser() {
        // console.log(this.form)
        this.form.role = '1'
        const md5 = crypto.createHash('md5')
        md5.update(this.form.password)
        let md5password = md5.digest('hex')  //md5password为加密后的内容，可直接传递给后端
        // console.log(md5password)
        this.$http.post('new_user', null, {
          params: {
            id: this.form.userid,
            pwd: md5password,
            role: this.form.role,
          }
        }).then(resp => {
          console.log(resp.data)
          if (resp.data) {
            this.$alert('添加成功！', '添加成功！', {
              confirmButtonText: '确定',
            }).then(resp1 => this.$router.go(0))
          } else {
            this.$alert('用户已存在！', '添加失败！', {
              confirmButtonText: '确定',
            }).then(resp1 => this.$router.go(0))
          }
        })
        this.dialogFormVisible = false
      },
    }
  };
</script>
<style scoped>
  .container {
    height: 100%;
    font-size: 15px;
  }
  .el-table{
    font-size: 15px;
  }
</style>
